// todo 学生信息渲染
renderList()
function renderList() {
    axios.get('/students')
        .then(({ data: { data } }) => {
            // 将数据渲染到页面上
            document.querySelector('.list').innerHTML = data.map(({ id, name, age, gender, group, salary, hope_salary, province }) => `
                    <tr>
                      <td>${name}</td>
                      <td>${age}</td>
                      <td>${gender}</td>
                      <td>第${group}组</td>
                      <td>${salary}</td>
                      <td>${hope_salary}</td>
                      <td>${province}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${id}"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${id}"></i></a>
                      </td>
                    </tr>
        `).join('')
            document.querySelector('.total').innerText = data.length
        })
}

// todo 学生信息删除
document.querySelector('.list').addEventListener('click', function (e) {
    const { tagName, dataset } = e.target
    if (tagName === 'I') {
        axios.delete(`/students/${dataset.id}`)
            .then(() => {
                renderList()
            }).catch(err => {
                alert('删除失败')
            })
    }
})

// todo 学生信息添加
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)

document.querySelector('#openModal').addEventListener('click', () => {
    modalBox.querySelector('form').reset()
    modalBox.querySelector('.modal-title').innerHTML = '添加学员'
    modalBox.dataset.id = 'add'
    modal.show()
})

const pselect = document.querySelector('[name=province]')
const cselect = document.querySelector('[name=city]')
const aselect = document.querySelector('[name=area]')

function initCity() {
    // 动态渲染省份
    axios.get('/api/province')
        .then(({ data: { data } }) => {
            pselect.innerHTML = `<option value="">--省份--</option>${data.map(item => `<option value="${item}">${item}</option>`).join('')}`
        })


    // 监听省份的选择
    pselect.addEventListener('change', function () {
        // 省份重新选择，市和区肯定要重置
        cselect.value = ''
        aselect.value = ''

        // 动态渲染市
        axios.get('/api/city', { params: { pname: pselect.value } })
            .then(({ data: { data } }) => {
                cselect.innerHTML = `<option value="">--城市--</option>${data.map(item => `<option value="${item}">${item}</option>`).join('')}`
            })
    })

    // 监听城市的选择
    cselect.addEventListener('change', function () {
        // 城市重新选择，区肯定要重置
        aselect.value = ''

        // 动态渲染地区
        axios.get('/api/area', { params: { pname: pselect.value, cname: cselect.value } })
            .then(({ data: { data } }) => {
                aselect.innerHTML = `<option value="">--地区--</option>${data.map(item => `<option value="${item}">${item}</option>`).join('')}`
            })
    })
}
initCity()

// todo 调用添加接口完成添加
const form = modalBox.querySelector('form')
const submitBtn = document.querySelector('#submit')
// 添加学生
submitBtn.addEventListener('click', function () {
    // 收集表单数据
    const data = serialize(form, { hash: true })
    // 处理格式（后台部分数据需要number格式）
    data.age = +data.age
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.gender = +data.gender
    data.group = +data.group

    if (modalBox.dataset.id === 'add') {
        // 添加逻辑
        axios.post('/students', data)
            .then(() => {
                modal.hide()
                renderList()
            }).catch(err => alert('添加失败'))
    }
})

// todo 学生信息修改
document.querySelector('.list').addEventListener('click', function (e) {
    const btn = e.target
    if (btn.classList.contains('bi-pen')) {
        modalBox.querySelector('.modal-title').innerHTML = '修改学员'
        modalBox.dataset.id = btn.dataset.id

        modal.show()
        // 获取数据回显
        axios.get(`/students/${btn.dataset.id}`)
            .then(({ data: { data: { id, name, age, gender, group, hope_salary, salary, province, city, area } } }) => {
                document.querySelector('[ name=name]').value = name
                document.querySelector('[ name=age]').value = age
                document.querySelector('[ name=group]').value = group
                document.querySelector('[ name=hope_salary]').value = hope_salary
                document.querySelector('[ name=salary]').value = salary

                // 性别
                if (gender === 0) {
                    document.querySelector('#cb01').checked = true
                } else {
                    document.querySelector('#cb02').checked = true
                }
                pselect.value = province
                // 处理省市区的回显
                // 动态渲染市
                axios
                    .get('/api/city', { params: { pname: province } })
                    .then(({ data: { data } }) => {
                        cselect.innerHTML = `<option value="">--城市--</option>${data.map(item => `<option value="${item}">${item}</option>`).join('')}`
                        cselect.value = city
                    })

                // 动态渲染区
                axios
                    .get('/api/area', { params: { pname: province, cname: city } })
                    .then(({ data: { data } }) => {
                        aselect.innerHTML = `<option value="">--地区--</option>${data.map(item => `<option value="${item}">${item}</option>`).join('')}`
                        aselect.value = area
                    })

            })

    }
})

// 添加 & 修改学生
submitBtn.addEventListener('click', function () {
    // 收集表单数据
    const data = serialize(form, { hash: true })
    // 处理格式（后台部分数据需要number格式）
    data.age = +data.age
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.gender = +data.gender
    data.group = +data.group

    if (modalBox.dataset.id === 'add') {
        // 添加逻辑
        axios
            .post('/students', data)
            .then(() => {
                modal.hide()
                renderList()
                tip('添加成功')
            })
            .catch(err => alert('添加失败'))

    } else {
        // 修改逻辑
        axios
            .put(`/students/${modalBox.dataset.id}`, data)
            .then(() => {
                tip('修改成功')
                modal.hide()
                renderList()
            })
            .catch(err => alert('修改失败'))
    }
})

